<template>
  <div
    class="nav"
    :class="isHome?changeImageIndex == '1'?'HomeNav':'OtherHomeNav':'OtherNav'"
  >
    <div class="nav_container">
      <div class="nav_logo">
        <el-image
          :src="changeImageIndex == '1'?logo:logoW"
          fit="cover"

          :style= "changeImageIndex == '1'?'margin:0px auto; ':'margin:15px auto;'"
        ></el-image>
      </div>

      <div class="nav_menu">
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
          :class="changeImageIndex == '1'?colorBlack:colorWhite"
        >
          <router-link to="/Home">
            <el-menu-item index="1">首页</el-menu-item>
          </router-link>
          <router-link :to="aboutUsActiveIndex === '1'?'/AboutUs/introduce':
          aboutUsActiveIndex === '2'?'/AboutUs/history':aboutUsActiveIndex === '3'?'/AboutUs/team':
          aboutUsActiveIndex === '4'?'/AboutUs/personal':'/AboutUs/business'">
            <el-menu-item index="2">关于我们</el-menu-item>
          </router-link>
          <router-link to="/Responsibility">
            <el-menu-item index="3">社会责任</el-menu-item>
          </router-link>
          <router-link to="/Case">
            <el-menu-item index="4">案例展示</el-menu-item>
          </router-link>
          <router-link to="/News">
            <el-menu-item index="5">新闻中心</el-menu-item>
          </router-link>
          <router-link to="/ContactUs">
            <el-menu-item index="6">联系我们</el-menu-item>
          </router-link>
        </el-menu>
      </div>
    </div>
  </div>
</template>

<script>
import logoUrl from '@/assets/img/Home/logo.png'
import logoUrl2 from '@/assets/img/Home/logoW.png'
export default {
    name: "sideMenu",
    data(){
      return{
        // 公司logo
        logo: logoUrl,
        logoW: logoUrl2,
        colorWhite:'colorWhite',
        colorBlack:'colorBlack',
        OtherHomeNav:'OtherHomeNav',
        historyPath:'/AboutUs'
      }
    },
    // 要接受父组件传递的参数
    props: ["changeImageIndex"],
    computed:{
        // 是否是首页
      isHome(){
        // console.log(this.$store.getters.isHomeF)
        return this.$store.getters.isHomeF
      },
      // 导航记录
      activeIndex(){
        // console.log(this.$store.getters.activeIndexF)
        return this.$store.getters.activeIndexF
      },
      aboutUsActiveIndex(){
        // console.log(this.$store.getters.activeIndexU)
        return this.$store.getters.activeIndexU
      }


    },
    watch: {
      '$route':'getPath'
    },
    methods:{
      getPath(){
        if(this.$route.path === '/Home'){
          this.$store.dispatch('changeActiveIndexY',1)
        }else if(this.$route.path.indexOf('/AboutUs') !== -1){
          this.$store.dispatch('changeActiveIndexY',2)
        }else if(this.$route.path === '/Responsibility'){
          this.$store.dispatch('changeActiveIndexY',3)
        }else if(this.$route.path === '/Case'){
          this.$store.dispatch('changeActiveIndexY',4)
        }else if(this.$route.path === '/News'){
          this.$store.dispatch('changeActiveIndexY',5)
        }else if(this.$route.path === '/ContactUs'){
          this.$store.dispatch('changeActiveIndexY',6)
        }
        if(this.$route.path === '/Home'){
          this.$store.dispatch('showNavHome')
        }else{
          this.$store.dispatch('hideNavHome')
        }
      },
      // 点击导航条
      handleSelect(key, keyPath) {
        // console.log(key, keyPath);
        this.$store.dispatch('changeActiveIndexY',key)
        if(key !== '1'){
          this.$store.dispatch('hideNavHome')
        }else{
          this.$store.dispatch('showNavHome')
        }
      },
    }
}
</script>

<style scoped lang="scss">
  // 导航条
  .HomeNav{
    position: absolute;
    z-index: 6;
    background-color: hsla(0,0%,100%,.3);
  }
  .OtherNav{
    position: relative;
    background-color: #ffffff;
    box-shadow: 0 4px 8px 0 rgba(159,97,79,.1);
  }
  .OtherHomeNav{
    position: absolute;
    z-index: 6;
  }
  .nav{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 120rem;
    .nav_container{
      width: 100rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .nav_logo{
        width: 20.5rem;
        height: 6.33rem;
      }
      .nav_menu{
        padding: 0 !important;
        display: flex;
        justify-content: center;
        align-items: center;
        .el-menu.el-menu--horizontal{
          background-color:transparent;
          height: 90px;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          border: none;
          padding-right: 1rem;
          a{
            border: none;
            text-decoration: none;
            margin-left: 7rem;
            .el-menu-item{
              /*font-family: 'fontNormal';*/
              font-weight: 300;
              font-size: 1.25rem;
              padding:0;
              width: 100%;
              text-align: center;
              border: none !important;
              /*color: #333333;*/
            }
            .el-menu-item:focus, .el-menu-item:hover{
              background-color: transparent;
            }
            .el-menu-item:hover{
              color: #8B8989;
            }
            .is-active{
              border: none;
              background-color: transparent;
              position: relative;
              display: flex;
              justify-content: center;
              align-items: flex-end;
              font-weight: bold;
            }
            .is-active::after{
              content: "";
              display: block;
              position: absolute;
              width: 4.5rem;
              height: .15rem;
              bottom: 1rem;
              /*background-color: #555555;*/
            }
            .is-active:hover{
              color: #333333;
            }
            .el-menu-item:hover,.el-menu-item:active{
              background-color: transparent;
            }
          }

        }
        .colorWhite{
          .el-menu-item{
            color: white;
          }
          .is-active::after{
            background: white;
          }
          .is-active:hover{
            color: #ffffff !important;
          }
        }
        .colorBlack{
          .el-menu-item{
            color: #333333;
          }
          .is-active::after{
            background: #333;
          }
          .is-active:hover{
            color: #333333;
          }
        }
      }
    }

  }
</style>
